<script setup>
import { ref, onMounted, watch } from "vue";
import TitleView from "@/components/TitleView.vue";
import {searchFoodArticle} from "@/api/food.js";
import { useRoute } from "vue-router";
import router from "@/router/index.js";
const route = useRoute();

const keyword = route.params.keyword;

const tips = ref([]);

onMounted(() => {
  searchTips(keyword);
});

// 监听路由参数的变化
watch(
    () => route.params.keyword,
    (newVal, oldVal) => {
      if (newVal !== oldVal) {
        searchTips(newVal);
      }
    }
);

const searchTips = (keyword) => {
  searchFoodArticle(keyword).then((res) => {
    tips.value = res.data;
  });
};

const handleClick = (tip) => {
  router.push({ name: 'article', params: { id: tip.id } })
};
</script>

<template>
  <div class="tips-container">
    <div>
      <TitleView title="搜索结果"/>
    </div>
    <el-row>
      <el-col :span="24" v-for="(tip, index) in tips" :key="index" @click="handleClick(tip)">
        <el-card class="tip-card">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-image
                  :src="tip.imageUrl"
                  class="tip-image"
                  :fit="'cover'"
              />
            </el-col>
            <el-col :span="18">
              <div class="tip-content">
                <div style="font-size: 18px; font-weight: bold">{{ tip.title }}</div>
                <p>{{ tip.description }}</p>
                <div class="tip-meta">
                  <span>{{ tip.createTime }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.tips-container {
  max-width: 1000px; /* 设置最大宽度 */
  margin: auto;      /* 自动水平居中 */
}

.refresh-button {
  margin-bottom: 20px; /* 按钮与内容之间的间距 */
}

.tip-image {
  width: 100%; /* 图片宽度 100% */
  height: 150px; /* 固定高度 */
}

.tip-content {
  padding-bottom: 10px;
  padding-right: 10px;
}

.tip-meta {
  font-size: 12px; /* 日期字体大小 */
  color: #999;     /* 日期颜色 */
}
</style>
